<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>css选择器</title>
	<style>
		h1,h3{
			color: blue;
			background-color: red;
		}
		
		p{
			background-color: red;
		}	
		.a{
			color: #fff;
			background-color: aquamarine;
		}
		
		#line2{
			background-color: purple;
		}
		.line3{
			background-color: green;
		}
		
		p{
			background-color: red;
		}
		
		
		.box>p{
			color: bisque;
		}
		
	</style>
</head>

<body>
	<pre>
			css选择器：
						1.标签选择器 标签名
			p  span
						2.类选择器 类名自取（不可为中文和纯数字）
						 . + class名
						3.id选择器 id名自取 唯一（不可为中文和纯数字）
						 # + id名
						选择器的优先级(权重)：
						  1.相同类型的选择器：后面的样式覆盖前面的样式
						  2.不同类型的选择器：id选择器(100) > class选择器(10) > 标签选择器(1)
						组合选择器：
						  1.后代选择器：用空格隔开   可以选择后代所有的元素 
						  2.亲代选择器(子代选择器)：用 > 隔开    可以选择直接子代的元素
						  3.逗号(,)选择器：用,隔开   选择所有的元素  选择多个 
						 
		</pre>

	
	
	<h1>断章</h1>
	<h3>【作者】卞之琳 【朝代】现代拼音</h3>
	<p class="line3 a">你站在桥上看风景，</p>
	<p class="line3" id="line2">看风景人在楼上看你。</p>
	<p class="line3">明月装饰了你的窗子，</p>
	<p>你装饰了别人的梦。</p>
	
	<div class="box">
		<p>11</p>
		<div>
			<p>33</p>
			<p>44</p>
		</div>
		<p>22</p>
	</div>
	
	
	






	<div style="height: 100px;"></div>
</body>

</html>